<template>
    <el-aside width='auto' class="show-shadow sidebar-container">
        <el-menu router unique-opened :default-active="$route.path" @open="handleOpen" @close="handleClose"
                 :collapse="isCollapse">
            <template v-for="(item, index) in urlList">
                <aside-item :aside="item" :index="index" :key="index"></aside-item>
            </template>
        </el-menu>
    </el-aside>
</template>

<script>
    import AsideItem from './AsideItem'

    export default {
        name: 'admin-aside',
        data() {
            return {
                //  v-if="item.children.length !== 0 && hasAuth(item)"
                //  v-else-if="item.children.length === 0 && hasAuth(item)"
                // v-if="hasAuth(childItem)"
            }
        },
        components: {
            AsideItem
        },
        computed: {
            isCollapse() {
                return this.$store.state.menu.isCollapse
            },
            urlList() {
                return this.$store.state.urlList.list
            }
        },
        methods: {
            // eslint-disable-next-line
            handleOpen(key, keyPath) {
            },
            // eslint-disable-next-line
            handleClose(key, keyPath) {
            }
        }
    }
</script>

<style lang="scss" scoped>
    .el-aside {
        display: flex;
        overflow: hidden;
        .el-menu {
            height: 100%;
            overflow-y: auto;
            &:not(.el-menu--collapse) {
                width: 225px;
            }
            [class^="el-icon-"] {
                font-size: 24px;
            }
        }
    }
</style>
